ES6 Symbol

概述

本篇只是整理整理一下 菜鸟教程 ES6 教程（里面包含了一份很棒的导图，最好看一下）一些很常用的知识就直接跳过了（例如 Promise、async 这些看之前的 JavaScript 笔记），文章大部分都是直接复制的 _(:з)∠)_

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版；现在各种浏览器对于 ES6 的支持情况参考 caniuse

ES6 环境搭建

下面这个打包是适用于在浏览器使用的情况，如果不在浏览器上使用可以直接使用单独使用 babel

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

webpack 主要有四个核心概念:

• 入口 (entry)
• 输出 (output)
• loader
• 插件 (plugins)

具体如何配置看 webpack 那篇文章

# 安装依赖
# --save-dev 可以直接使用 -D 参数
# --save 可以直接使用 -S 参数
npm install -D webpack webpack-cli
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm install -D html-webpack-plugin

配置文件如下：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        // use 表示使用 'babel-loader' 加载器来处理 .js 文件；
        // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      // template 指定你生成的文件所依赖哪一个 html 文件模板
      template: './src/index.html',
      filename: 'index.output.html'
    })
  ]
}

控制台使用 webpack 就能自动打包了

配置自动打包工具

安装 webpack 的自动打包工具，使之能监听代码修改了自动打包

npm install webpack-dev-server -D

然后在 package.json 配置文件中的 scripts 节点下修改 dev 脚本

// --open 打包完成后自动打开浏览器界面
// --host 配置 IP 地址
// --port 配置端口
"scripts": {
  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" 
},

执行命令启动

npm run dev

但是老实说这个有点慢啊，还是手动比较方便

ES6 Symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol。

Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述（就是说传入的这个字符串只是一个标识这个 Symbol 的），用来显示在控制台或者作为字符串的时候使用，便于区分。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

作为属性名

由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

let sy = Symbol("key1");
 
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Symbol 作为对象属性名时不能用 . 运算符，要用方括号。因为 . 运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

let syObject = {};
syObject[sy] = "kk";

syObject[sy];  // "kk"
syObject.sy;   // undefined

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in 、 for...of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

// 这里使用普通的对象属性进行对比
let tempObject = {};
tempObject.key1 = 'hello'
tempObject.key2 = 'world'

console.log(Object.keys(tempObject));                    // [ 'key1', 'key2' ]

console.log(Object.keys(syObject));                      // []
// 获取 Symbol 属性名
console.log(Object.getOwnPropertySymbols(syObject));     // [Symbol(key1)]
console.log(Reflect.ownKeys(syObject));                  // [Symbol(key1)]

Symbol.for()

Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"